<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" >
    <link rel="stylesheet" href="style.css">
    <title>打字游戏</title>
</head>
<body>
    <button id="settings-btn" class="settings-btn">
        <i class="fas fa-cog"></i>
    </button>

    <div id="settings" class="settings">
        <form id="settings-form">
        <div>
            <label for="difficulty">难度</label>
            <select id="difficulty">
                <option value="easy">简单</option>
                 <option value="medium">中等</option>
                <option value="hard">困难</option>
            </select>
        </div>
        </form>
    
   </div>



<div class="container">
   <h2>🤢打字游戏😇🤧🤧</h2>
   <small>请输入:</small>


<h1 id="word">TEST</h1>

<input type="text" id="text" autocapitalize="off" placeholder="在这里输入哇...">

<p class="time-container">
    剩余时间: <span id="time">10s</span>
</p>

<p class="score-container">
    分数: <span id="score">0</span>
</p>

<div id="end-game-container" class="end-game-container"></div>
</div>



   <script src="script.js" ></script>
</body>
</html>